<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card class="tree-card">
        <!-- 用了一个行列布局 -->
        <TreeTools :data="company" :is-tools="true" @addDepartments="addDepartments" />
        <hr>
        <!-- 树形组件显示的地方 -->
        <el-tree :data="departs" :props="defaultProps" :default-expand-all="true">
          <!-- 在这个属性组件的插槽里面可以控制每一个节点显示时的样式 -->
          <!-- 每个插槽都有两个参数，第一插槽名，第二作用域插槽形参 -->
          <template slot-scope="scope">
            <!-- 每次渲染到的部门数据，就会在scope.data 里面储存 -->
            <!-- 用了一个行列布局 -->
            <TreeTools :data="scope.data" @addDepartments="addDepartments" @delDepartments="getDepartmentList" @editDepartments="editDepartments" />
          </template>
        </el-tree>
      </el-card>
      <!-- 添加部门弹框组件 -->
      <!-- 父组件用 sync 修饰符 可以让数据改成传过来的值 -->
      <AddDept ref="addEmploy" :show-dialog.sync="isShowDialog" :node="node" @addDepartments="getDepartmentList" />
    </div>
  </div>
</template>

<script>
// 树形结构封装组件
import TreeTools from './components/tree-tools'
// 添加部门弹框组件
import AddDept from './components/add-dept'
import { getDepartments } from '@/api/departments'
// 引入第二种树形结构数据转换逻辑
import { listToTreeData } from '@/utils'
export default {
  components: {
    TreeTools, AddDept
  },
  data() {
    return {
      company: {
        name: '江苏传智播客教育科技股份有限公司',
        manager: '负责人',
        id: ''
      },
      departs: [],
      defaultProps: {
        label: 'name'
      },
      isShowDialog: false, // 是否添加部门
      node: {} // 添加子部门的父部门
    }
  },
  created() {
    this.getDepartmentList()
  },
  methods: {
    async getDepartmentList() {
      const { depts } = await getDepartments()
      // console.log(res)
      // 调用第二种树形结构数据转换逻辑，处理数据
      this.departs = listToTreeData(depts, '')
    },
    // 添加部门
    addDepartments(data) {
      this.isShowDialog = true
      this.node = data
    },
    // 编辑部门，数据回显
    async editDepartments(data) {
      await this.$refs.addEmploy.editDepartment(data.id)
      this.isShowDialog = true
      this.node = data
    }
    // 第一种，树形结构转换逻辑
    /*  listToTreeData(list, pid) {
      // 定义一个空数组
      const res = []
      // 遍历传入的数组
      list.forEach(item => {
        // 如果数组对象中的 pid 和传入的 参数 一样，就把 当前对象存入新数组中
        if (item.pid === pid) {
          // 递归开始，逻辑相同，有结束条件
          // 调用当前函数，传入的是 前一个 数组对象的 id，因为 二级菜单的 pid 和 以及菜单的 id 是一样的
          const children = this.listToTreeData(list, item.id)
          // 递归结束
          // 当 递归返回的数组有数据时
          if (children.length > 0) {
            // 就把 递归形成的数据，放到传入数组对象的 children 中
            item.children = children
          }
          res.push(item)
        }
      })
      return res
    } */

  }
}
</script>

<style scoped>
 /* .dashboard-container{
   padding: 20px;
 } */

 .tree-card {
  padding: 30px;
  font-size:14px;
}

 .el-tree-node__content{
  height: 40px;
}
</style>
